<template>
  <div>
    <h3>{{ title || "Item" }}组件</h3>
    <p v-if="id === '001'">DNF简介</p>
    <p v-if="id === '002'">CF简介</p>
    <p v-if="id === '003'">LOL简介</p>

    <strong>{{ it }}</strong>
    <hr />
    <strong>props中age---{{ age }}</strong>
  </div>
</template>

<script>
export default {
  name: "Item",
  mounted() {
    // console.log(this.$route.params.id);
    console.log(this.$route.meta);
  },
  // 路由配置里面props属性值为true 可以直接在组件中使用props接收params参数
  props: ["id", "title", "age", "it"],
  data() {
    return {};
  },
  // 组件内进入时守卫(在这里没有this,因为组件实例没有创建)
  // 组件内进入时守卫的next方法可以接受一个回调函数作为参数，回调函数内部可以通过第一个参数拿到组件实例
  beforeRouteEnter(to, from, next) {
    console.log("组件内进入时守卫", this);
    next((vm) => {
      console.log("next中的this", vm);
    });
  },
  // 组件内更新守卫(只有当前路由的params动态参数发生改变的时候触发，并且不会触发当前路由的独享守卫和组件进入时守卫)
  beforeRouteUpdate(to, from, next) {
    console.log("组件内更新时守卫");
    next();
  },
  // 组件内离开时守卫(只有离开执行了，才能执行其他路由的前置守卫)
  beforeRouteLeave(to, from, next) {
    console.log("组件内离开时守卫");
    next();
  },
};
</script>

<style></style>
